<template>
  <button class="dc-button"
    :class="`dc-button-${type}`">
    <i class="dc-button_icon iconfont"
      :class="`icon-${icon}`"
      v-if="icon"></i>
      <i class="dc-button_icon bcc-iconfont"
      :class="`${bccIcon}`"
      v-if="bccIcon"></i>
    <span class="dc-button_text"><slot></slot></span>
  </button>
</template>
<script>
export default {
  componentName: 'button',
  props: {
    type: {
      type: String,
      default: 'default',
      validator: function(val) {
        return ['default', 'grey', 'text'].indexOf(val) > -1
      }
    },
    icon: {
      type: String
    },
    bccIcon: {
      type: String
    }
  }
}

</script>
<style lang="less">
.dc-button {
  position: relative;
  display: inline-block;
  height: 32px;
  line-height: 32px;
  padding: 0 8px;
  cursor: pointer;
  font-size: 0;
  outline: none;
  border: none;
  border-radius: 4px;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
  &&-default {
    color: #fff;
    background-color: #37c8f7;
    &:hover {
      background-color: darken(#37c8f7, 5%);
    }
  }
  &&-grey {
    color: #6d757a;
    background-color: #f1f3f7;
    &:hover {
      color: #fff;
      background-color: #37c8f7;
      a {
        color: #fff;
      }
    }
    a {
      display: block;
      color: #6d757a;
    }
  }
  &&-text {
    color: #505050;
    background-color: #fff;
    &:hover {
      color: #00A1D6;
      a,.bcc-iconfont{
        color: #00A1D6;
      }
    }
    a {
      display: block;
      color: #505050;
    }
  }
  &_icon {
    display: inline-block;
    line-height: 20px;
    font-size: 20px;
    margin-right: 5px;
    background-size: cover;
    background-position: center;
    vertical-align: middle;
  }
  &_text {
    display: inline-block;
    font-size: 12px;
    vertical-align: middle;
  }
}

</style>
